<template>
	<view class="main">
		<uni-nav-bar fixed left-icon="back" title="抽奖" color="#FFFFFF" backgroundColor="transparent" :border="false" statusBar
			@clickLeft="goReturn"></uni-nav-bar>
		<view class="cj-zp">
			<view class="zp-top">
				<view class="top-bg-out" >
					<view class="top-bg-in" :style="'-webkit-transform:rotate(' + deg + 'deg) translateZ(0);transform:rotate(' + deg + 'deg) translateZ(0)'">
						<image v-for="(item,index) in awardList" :key="index" :src="item.img_slice" :class="'jp'+index" :style="'-webkit-transform:rotate(' + (360-deg) + 'deg) translateZ(0);transform:rotate(' + (360-deg) + 'deg) translateZ(0)'"></image>
					</view>
					<button class="cj-btn" @click="turntableStart">抽奖</button>
				</view>
			</view>
			<view class="zp-bottom">
				<view class="zp-foot">
					剩余次数({{num}})
				</view>
			</view>
			
		</view>
		<view class="cj-info">
			<view class="p1">温馨提示</view>
			<view class="p2">1、进入抽奖页面，点击“开始抽奖”；</view>
			<view class="p2">2、未充值或充值在1000元以下每天可免费抽奖1次；</view>
			<view class="p2">3、充值满1000元，每天可免费抽奖2次，充值满2000元每天可以免费抽奖3次；</view>
		</view>
		<uni-popup ref="popup" background-color="transparent" :mask-click="false" :animation="false">
			<view class="popup-content">
				<image class="bg1" src="../../../static/img/home/cj/bg2.png" mode="aspectFit"></image>
				<image class="bg2" src="../../../static/img/home/cj/zj.png" mode="aspectFit"></image>
				<view class="popup-info">
					 <image :src="item.img_slice" mode="aspectFit"></image>
					 <view class="content">
						 恭喜获得{{item.award}}
					 </view>
					<button class="popup-btn" type="default" @click="closeNotice"></button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>
<script>

export default {
  data() {
    return {
		deg: 0,
		singleAngle: '',
		// 每片扇形的角度
		isStart: false,
		areaNumber:9,
		speed:16,
		num:0,
	  item:{},
      award: 1,
      awardList: [] // 顺时针对应每个奖项 

    };
  },
  onLoad() {
	this.getNum() 
	this.getAwardList()
  	this.init()
  },
  methods: {
	getNum(){//获取抽奖次数
		this.$http.get('/v1/get_lottery_count',res => {
			this.num = res.data.count
		})
	},
	getAwardList(){
		this.awardList = []
		let list = []
		this.$http.get('v1/award_list',res => {
			res.data.forEach(item => {
				if(!item.img_slice){
					item.img_slice = '/static/img/home/cj/'+item.id+'.png'
				}else{
					item.img_slice = this.$global.imgUrl + item.img_slice 
				}
				list[item.rank_id - 1] = item
			})
			this.awardList = list
		})
	},
	init() {
		let { areaNumber } = this;
		const singleAngle = 360 / areaNumber;
		this.singleAngle = singleAngle;
	},
	
	begin(awardNumer) {
		var deg = this.deg;
		var singleAngle = this.singleAngle;
		var speed = this.speed;
		var isStart = this.isStart;
		if (isStart) return;
		this.isStart = true;
		let endAddAngle = 0;
		endAddAngle = 360 - ((awardNumer - 1) * singleAngle + singleAngle / 2); // 中奖角度
		const rangeAngle = (Math.floor(Math.random() * 4) + 4) * 360; // 随机旋转几圈再停止
		console.log(endAddAngle);
		let cAngle;
		deg = 0;
		this.timer = setInterval(() => {
			if (deg < rangeAngle) {
				deg += speed;
			} else {
				cAngle = (endAddAngle + rangeAngle - deg) / speed;
				cAngle = cAngle > speed ? speed : cAngle < 1 ? 1 : cAngle;
				deg += cAngle;

				if (deg >= endAddAngle + rangeAngle) {
					deg = endAddAngle + rangeAngle;
					this.isStart = false;
					clearInterval(this.timer);
					this.turntableSuccess()
				}
			}

			this.deg = deg;
		}, 1000 / 60);
	},
	
	// 返回
	goReturn() {
		uni.navigateBack({
			delta: 1
		});
	},
    // 用户点击开始抽奖
    turntableStart() {
		if(this.num <= 0){
			uni.showToast({
			  title: `抽奖次数为0`,
			  icon: 'none'
			});
			return
		}
      //let index = Math.floor(Math.random() * 9 + 1) //前端随机数，这里应该后台返回中奖结果
      this.$http.get('v1/lottery',res => {
		  const data = res.data 
		  this.awardList.forEach(item => {
			  if(item.id == data.win_id){
				  this.award = item.rank_id
			  }
		  })
		  this.begin(this.award);
		  this.num--
		  this.getNum()
	  })
    },

    // 抽奖完成后操作
    turntableSuccess() {
      const index = this.award - 1;
      console.log('bind:success', this.awardList[index]);
      this.item = this.awardList[index]
	  this.$refs.popup.open('center')
    },
	closeNotice(){
		this.$refs.popup.close()
	}
  }
}
</script>
<style lang="scss">
	page{
		background-color: rgb(235,75,75);
	}
	.main{
		background-image: url(../../../static/img/home/cj/bg.png);
		background-size: 100%;
		background-repeat: no-repeat;
		.cj-zp{
			width: 690upx;
			height: 1000upx;
			margin-top: 380upx;
			position: relative;
			.zp-top{
				width: 680upx;
				height: 680upx;
				margin: 0 auto;
				z-index: 10;
				position: relative;
				.top-bg-out{
					width: 680upx;
					height: 680upx;
					background-image: url(../../../static/img/home/cj/zpw.png);
					background-size: 100% 100%;
					display: flex;
					align-items: center;
					justify-content: center;
					position: relative;
					.top-bg-in{
						width: 570upx;
						height: 570upx;
						background-image: url(../../../static/img/home/cj/zpbg.png);
						background-size: 100% 100%;
						display: flex;
						align-items: center;
						justify-content: center;
						position: relative;
						image{
							width: 90upx;
							height: 110upx;
							background-size: 100% 100%;
							position: absolute;
						}
						.jp0{top: 30upx;right: 170upx;}
						.jp1{top: 120upx;right: 50upx;}
						.jp2{top: 260upx;right: 20upx;}
						.jp3{top: 390upx;right: 110upx;}
						.jp4{top: 420upx;left: 245upx;}
						.jp5{top: 390upx;left: 110upx;}
						.jp6{top: 260upx;left: 20upx;}
						.jp7{top: 120upx;left: 50upx;}
						.jp8{top: 30upx;left: 170upx;}
					}
					.cj-btn{
						width: 190upx;
						height: 190upx;
						background-image: url(../../../static/img/home/cj/zpc.png);
						background-size: 100% 100%;
						border-radius: 50%;
						line-height: 190upx;
						color: $whiteColor;
						font-size:56upx;
						position: absolute;
						top: 245upx;
						z-index: 99;
					}
				}
				.top-bg-out::before{
					content: '';
					width: 73upx;
					height: 73upx;
					background-image: url(../../../static/img/home/cj/zpt.png);
					background-size: 100% 100%;
					position: absolute;
					top: 190upx;
					left: 300upx;
					z-index: 66;
				}
			}
			.zp-bottom{
				width: 580upx;
				height: 300upx;
				margin: 0 auto;
				background-image: url(../../../static/img/home/cj/zpb.png);
				background-size: 100% 100%;
				position: relative;
				top: -105upx;
				z-index: 5;
				.zp-foot{
					width: 360upx;
					height: 150upx;
					line-height: 120upx;
					text-align: center;
					font-size: 44upx;
					color: #921F00;
					background-image: url(../../../static/img/home/cj/btn.png);
					background-size: 100% 100%;
					position: absolute;
					bottom: -30upx;
					left: 110upx;
				}
			}
			
		}
		.cj-info{
			color: $whiteColor;
			padding-bottom: 20upx;
			.p1{
				font-size: 32upx;
				margin-bottom: 20upx;
			}
			.p2{
				font-size: 28upx;
			}
		}
		.popup-content{
			display: flex;
			flex-direction: column;
			width: 625upx;
			height: 600upx;
			position: relative;
			.bg1{
				width: 100%;
				height: 160upx;
				background-size: 100% 100%;
				position: absolute;
				top: -40upx;
				z-index: 99;
			}
			.bg2{
				width: 100%;
				width: 100%;
				height: 160upx;
				background-size: 100%;
				position: absolute;
				top: 30upx;
			}
			.popup-info{
				width: 544upx;
				height: 435upx;
				position: absolute;
				top: 145upx;
				left: 40upx;
				background-color: $whiteColor;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				border-radius: 0upx 0upx 30upx 30upx ;
				image{
					width: 190upx;
					height: 224upx;
					background-size: 100% 100%;
				}
				.content{
					color: #EB4B4B;
					font-size: 28upx;
					height: 60upx;
					line-height: 60upx;
				}
				.popup-btn{
					background-image: url(../../../static/img/home/cj/qr.png);
					background-size: 100% 100%;
					height: 80upx;
					width: 292upx;
				}
			}
		}
	}
</style>